<template>
  <div class="communication">
    <div class="bgg">
      <div class="card_title">
        旺旺沟通效果
      </div>
      <div class="groupbox" style="margin-bottom: 19px">
        <a-space align="baseline">
          <span class="title">小组：</span>
          <a-select
            label-in-value
            class="selecth24 br4"
            style="width: 175px;height:24px;"
            placeholder="请选择小组"
            @change="handleChange"
            v-model="group_id"
            allowClear
          >
            <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
              {{ v.name }}
            </a-select-option>
          </a-select>
          <a-button
            type="primary"
            :disabled="btnloading"
            size="small"
            class="br4"
            @click="getWangRankList(1)">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'搜索中...':'搜索' }}
          </a-button>
        </a-space>
      </div>
      <div class="activitytable">
        <a-table
          :columns="columns"
          :rowKey="(item,index) => index "
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="index" slot-scope="text, row,index">
            <span
              class="index"
              :style="{
                backgroundColor:index<3? '#314659':'#f5f5f5',
                color:index<3? '#ffffff':'#101010',
              }">{{ index+1 }}</span>
          </div>
          <div slot="group" slot-scope="text, row">
            <div> {{ row.teamName + '-' + row.group }}</div>
          </div>
          <div slot="shop_rate" slot-scope="text, row">
            {{ row.shop_rate }}%
          </div>
          <div slot="goods_rate" slot-scope="text, row">
            {{ row.goods_rate }}%
          </div>

        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getWangRankList } from '@/api/admin/staff'
  import moment from 'moment'

  export default {
    name: 'Communication',
    data () {
      return {
        moment,
        start: '',
        end: '',
        group_id: '',
        pagination: {
          pageSize: 9999,
          page: 1
        },
        columns: [
          {
            title: '排名',
            align: 'center',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            title: '用户',
            align: 'center',
            dataIndex: 'user',
            scopedSlots: {
              customRender: 'user'
            }
          },
          {
            title: '小组',
            align: 'center',
            // dataIndex: 'group',
            scopedSlots: {
              customRender: 'group'
            }
          },
          {
            title: '旺旺沟通数',
            align: 'center',
            dataIndex: 'wang_count',
            scopedSlots: {
              customRender: 'wang_count'
            }
          },
          {
            title: '新增店铺数',
            align: 'center',
            dataIndex: 'shop_num',
            scopedSlots: {
              customRender: 'shop_num'
            }
          },
          {
            title: '店铺沟通率',
            align: 'center',
            // dataIndex: 'shop_rate',
            scopedSlots: {
              customRender: 'shop_rate'
            }
          },
          {
            title: '新增商品数',
            align: 'center',
            dataIndex: 'goods_num',
            scopedSlots: {
              customRender: 'goods_num'
            }
          },
          {
            title: '商品沟通率',
            align: 'center',
            // dataIndex: 'goods_rate',
            scopedSlots: {
              customRender: 'goods_rate'
            }
          }
        ],
        activity: [
          // {
          //   user: '从雪艳', // 用户
          //   group: '从雪艳', // 组长
          //   teamName: '测试团队名称', // 团队名称
          //   shop_num: '2', // 新增商家数
          //   goods_num: '1', // 新增商品数
          //   wang_count: 2, // 旺旺沟通数
          //   shop_rate: 100, // 店铺沟通率
          //   goods_rate: 50// 商品沟通率
          // }
        ],
        loading: false,
        username: '',
        classList: [
          {
            name: '所有',
            id: -1
          },
          {
            name: '待接单',
            id: 1
          },
          {
            name: '已接单待推广',
            id: 2
          },
          {
            name: '正在推广',
            id: 3
          },
          {
            name: '已结算待提交券截图',
            id: 4
          },
          {
            name: '待审核截图',
            id: 5
          },
          {
            name: '审核失败',
            id: 6
          },
          {
            name: '审核成功待打款',
            id: 7
          },
          {
            name: '打款成功',
            id: 8
          }
        ],
        btnloading: false
      }
    },
    computed: {},
    created () {
      // this.getWangRankList(1)
    },
    mounted () {
    },
    methods: {
      handleChange (val) {
        console.log(val)
      },
      // passChange (dates, dateStrings) {
      //   // console.log('From: ', dates[0], ', to: ', dates[1])
      //   console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      //   this.start = dates[0].unix()
      //   this.end = dates[1].unix()
      //   console.log(this.start, this.end)
      //   // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
      // },
      getWangRankList (page) {
        this.loading = true
        this.btnloading = true
        getWangRankList({
          group_id: this.group_id
          // start: this.start,
          // end: this.end
          // sort_field: //排序字段：字段名称；不传默认旺旺沟通数 或者传空字符串都是默认
          // sort  //排序方式：升序/降序；不传默认降序 大于0 升序 小于 0降序
        }).then(res => {
          console.log(res)
          this.activity = res.data.data
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.total
          this.pagination = pagination
          this.loading = false
          this.btnloading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getWangRankList(params.page)
      }
    }
  }
</script>
<style lang="less" scoped>
  .communication {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

    .a_blue {
      color: #2396F9;
    }

    .title {
      color: #101010;
      font-size: 14px;
      font-weight: 600;
    }

    .ipt {
      width: 138px;
      height: 24px;
    }

    .timepacker {
      /deep/ .ant-calendar-picker-input {
        padding: 0;
        height: 24px;
      }
    }

    .selecth24 {
      /deep/ .ant-select-selection__rendered {
        line-height: 24px;
      }

      /deep/ .ant-select-selection {
        height: 24px;
        border-radius: 4px;
      }
    }

    .coupon {
      /*border: 1px solid rgb(255, 85, 64);*/
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      overflow: hidden;
      width: 96px;
      /*margin: 0 auto;*/

      .couponleft {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background-color: rgb(255, 85, 64);
        color: #ffffff;
      }

      .couponright {
        width: 48px;
        height: 24px;
        line-height: 21px;
        background-color: #ffffff;
        color: rgb(255, 85, 64);
        border: 1px solid #ff5540;
        border-radius: 0 4px 4px 0;
      }
    }
  }
</style>
